import { mapState, mapActions } from 'vuex';
import * as api from '../../api/department';

let currentDepartment = {};

export default {
    data () {
        return {
            visible4add: false,
            visible4edit: false,
            // 新增表单的参数
            params4add: {}, // to do
            // 编辑表单的参数
            params4edit: {}, // 返显
        };
    },
    computed: {
        ...mapState('department', [
            'departmentList',
            'managerList',
        ]),
        tree () {
            const dealData = (data, isFirst) => {
                const result = [];
                for (const item of data) {
                    if (isFirst && item.pid) {
                        continue;
                    }
                    // 自己的id
                    const id = item.id;
                    // 去data中找有没有自己的孩子（d.pid === id） >>> filter
                    const children = this.departmentList.filter((d) => d.pid === id);
                    item.departments = dealData(children, false);
                    result.push(item);
                }
                return result;
            }

            return dealData(this.departmentList, true);
        },
        tree2 () {
            const dealData = (data) => {
                return data.map(d => {
                    return {
                        ...d,
                        departments: dealData( this.departmentList.filter((dd) => dd.pid === d.id) ),
                    };
                });
            }

            return dealData( this.departmentList.filter(d => !d.pid) );
        },
    },
    methods: {
        ...mapActions('department', [
            'updateDepartmentList',
            'updateManagerList',
        ]),
        onOperatorClick (cmd, data) {
            currentDepartment = data;
            switch (cmd) {
                case 'ADD_CHILD_DEPARTMENT':
                    // 打开新增弹窗
                    this.openDialog4add();
                    break;
                case 'EDIT_DEPARTMENT':
                    // 打开编辑弹窗
                    this.openDialog4edit();
                    this.params4edit = currentDepartment;
                    break;
                case 'DELETE_DEPARTMENT':

                    break;

                default:
                    break;
            }
        },
        openDialog4add () {
            this.visible4add = true;
        },
        openDialog4edit () {
            this.visible4edit = true;
        },
        // 新增的表单确认事件
        async ok4add () {
            const res = await api.addChildDepartment({
                ...this.params4add,
                pid: currentDepartment.id,
            });
            this.$message({
                message: res.data.message,
                type: res.data.success ? 'success' : 'error',
            });
            this.updateDepartmentList();
            this.visible4add = false;
        },
        async ok4edit () {
            const res = await api.editDepartment(this.params4edit, currentDepartment.id);
            this.$message({
                message: res.data.message,
                type: res.data.success ? 'success' : 'error',
            });
            this.updateDepartmentList();
            this.visible4edit = false;
        },
    },
    mounted () {
        this.updateDepartmentList();
        this.updateManagerList();
    },
}
